{% block sw_text_editor_toolbar_button_link_menu %}
<div class="sw-text-editor-toolbar-button__link-menu">
    {% block sw_text_editor_toolbar_button_link_menu_content %}
    <div class="sw-text-editor-toolbar-button__link-menu-content">
        {% block sw_text_editor_toolbar_button_link_menu_content_type %}
        <mt-select
            :model-value="linkCategory"
            :label="$tc('sw-text-editor-toolbar.link.labelType')"
            require
            :options="linkCategoryOptions"
            @update:model-value="onSelectFieldChange"
        />
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs %}
        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_link %}

        <mt-text-field
            v-if="linkCategory === 'link'"
            v-model="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholder')"
            name="sw-field--linkTarget"
        />
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_phone %}

        <mt-text-field
            v-else-if="linkCategory === 'phone'"
            v-model="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderPhoneNumber')"
            name="sw-field--linkTarget"
        />
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_email %}
        <mt-email-field
            v-else-if="linkCategory === 'email'"
            v-model="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderEmail')"
            name="sw-field--linkTarget"
        />
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_detail %}
        <sw-entity-single-select
            v-else-if="linkCategory === 'detail'"
            v-model:value="linkTarget"
            class="sw-text-editor-link-menu__entity-single-select"
            entity="product"
            should-show-active-state
            :criteria="entityFilter"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderProduct')"
            show-clearable-button
            display-variants
        />
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_category %}
        <sw-category-tree-field
            v-else-if="linkCategory === 'navigation'"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderCategory')"
            :categories-collection="categoryCollection"
            single-select
            @selection-add="replaceCategorySelection"
            @selection-remove="removeCategorySelection"
        />
        {% endblock %}
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_media %}
        <sw-media-field
            v-else-if="linkCategory === 'media'"
            v-model:value="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :criteria="entityFilter"
            single-select
        />
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_opens_new_tab %}

        <mt-switch
            v-if="!['phone', 'email'].includes(linkCategory)"
            v-model="opensNewTab"
            class="sw-text-editor-toolbar-button__link-menu-switch sw-text-editor-toolbar-button__link-menu-new-tab"
            :label="$tc('sw-text-editor-toolbar.link.openInNewTab')"
            remove-top-margin
        />
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_display_as_button %}

        <mt-switch
            v-model="displayAsButton"
            class="sw-text-editor-toolbar-button__link-menu-switch sw-text-editor-toolbar-button__link-menu-display-button"
            :label="$tc('sw-text-editor-toolbar.link.displayAsButton')"
            remove-top-margin
        />
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_content_type_button_type %}
        <mt-select
            v-if="displayAsButton"
            v-model="buttonVariant"
            class="sw-text-editor-link-menu__button-variant"
            :label="$tc('sw-text-editor-toolbar.link.buttonVariant')"
            :options="buttonVariantList"
            require
        />
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_text_editor_toolbar_button_link_menu_buttons %}
    <div class="sw-text-editor-toolbar-button__link-menu-buttons">
        {% block sw_text_editor_toolbar_button_link_menu_button_remove %}
        <mt-button
            class="sw-text-editor-toolbar-button__link-menu-buttons-button-remove"
            variant="critical"
            ghost
            size="small"
            :disabled="!linkTarget"
            @click="removeLink"
        >
            {{ $tc('global.default.remove') }}
        </mt-button>
        {% endblock %}

        {% block sw_text_editor_toolbar_button_link_menu_button_insert %}
        <mt-button
            class="sw-text-editor-toolbar-button__link-menu-buttons-button-insert"
            variant="primary"
            size="small"
            :disabled="!linkTarget"
            @click="setLink"
        >
            {{ $tc('global.default.add') }}
        </mt-button>
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
